이런 저런 이유로 클라이언트 상태를 localStorage 등에 persist 하고 있을 경우 server/client mismatch가 발생할 수 밖에 없는데 그래서 서버에서 프리렌더가 안되게 하려면 아래와 같은 난리 법석이 필요.

1. useState + useEffect

   function Comp() {
     const storeState = useStoreState()
           ^^^^^^^^^^ 1) 요걸 그냥 쓰면 💣 인 경우,
   
     const [state, setState] = React.useState()
     React.useEffect(()=>{
       setState(storeState)
     },[])               // 2) 이런 난리 법석 후에
   
     return <div>{state}</div> // 3) 이러면 통과

   function Comp() {
     const storeState = useStoreState()
           ^^^^^^^^^^ 1) 요걸 그냥 쓰면 💣 인 경우,
   
     const [state, setState] = React.useState()
     React.useEffect(()=>{
       setState(storeState)
     },[])               // 2) 이런 난리 법석 후에
   
     return <div>{state}</div> // 3) 이러면 통과

2. useMounted + return null

   // 0) 일단 이런 난리 법석을 만들어두고
   const useMounted = () => {
     const [m, sM] = React.useState(false)
     //     ^^^^^ 귀찮아서 대충 씀
     React.useEffect(()=>{
       sM(true)
     }, [])
     return m
   }

   // 0) 일단 이런 난리 법석을 만들어두고
   const useMounted = () => {
     const [m, sM] = React.useState(false)
     //     ^^^^^ 귀찮아서 대충 씀
     React.useEffect(()=>{
       sM(true)
     }, [])
     return m
   }

   function Comp() {
     const storeState = useStoreState()
           ^^^^^^^^^^ 1) 요걸 그냥 쓰면 💣 인 경우,
   
     const mounted = useMounted()
     if (!mounted) return null  // 2) 이러고 나서
   
     return <div>{storeState}</div> // 3) 이러면 통과

   function Comp() {
     const storeState = useStoreState()
           ^^^^^^^^^^ 1) 요걸 그냥 쓰면 💣 인 경우,
   
     const mounted = useMounted()
     if (!mounted) return null  // 2) 이러고 나서
   
     return <div>{storeState}</div> // 3) 이러면 통과

3. next/dynamic + { ssr: false } ☜ 이게 기분이 제일 덜 나쁜듯

   const Comp = dynamic(() => import('path/to/comp'), { ssr: false }); // 젤 간단?

   const Comp = dynamic(() => import('path/to/comp'), { ssr: false }); // 젤 간단?

   하지만 캐치가 하나 있는데, Comp 는 무조건 export default 여야 함.

   const Comp = dynamic(() => import('path/to/comp').then(mod => mod.Comp), { ssr: false })
                                                       // ^^^^^^^^^^^^^^^ 이러면 💣

   const Comp = dynamic(() => import('path/to/comp').then(mod => mod.Comp), { ssr: false })
                                                       // ^^^^^^^^^^^^^^^ 이러면 💣

   대신 loading으로 서스펜스 간지를 낼 수 있음(...)

   const Comp = dynamic(() => import('path/to/comp'), { ssr: false, loading: () => <Sekeleton /> }); // 이 가능

   const Comp = dynamic(() => import('path/to/comp'), { ssr: false, loading: () => <Sekeleton /> }); // 이 가능

   물론 next 한정이지만요...

이거 다 별루고... 로 시작하는 글을 한참 쓰고 있었는데 브라우저 꺼져서 날아감...

1. @vercel/og
2. Edge Runtime 환경 기반으로 동작함.
3. 이미지 렌더에 satori를 사용하는데,
   • react element를 svg로 변환하는 라이브러리이고,
   • React Native의 Flexbox layout engine을 사용하므로, css의 모든 기능을 사용할 순 없다.
     • e.g. z-index, calc() 등 사용 불가능.
4. app router 사용시 app/og/route.tsx 혹은 app/og.tsx 등등으로 파일을 만들면 됨.
   • .ts도 사용할 수 있으나 고러면 jsx를 사용할 수 없겟쥬
5. 커스텀 폰트를 사용할 수 있으나 next/font 외에 별도로 로컬에서 폰트 파일을 가져와야 함. (리모트는 아직 안해봄)
   • .ttf, .woff 사용 가능 (.woff2는 안됨)
6. 대략의 api는 아래와 같음.

   new ImageResponse(
     element: ReactElement,
     options: {
       width?: number = 1200
       height?: number = 630
       emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji', // emoji render에 어떤 lib을 사용할 것인지
       fonts?: {
         name: string,
         data: ArrayBuffer, // 폰트 파일 데이터. fetch(URL).then(res => res.imageBuffer())로 가져오면 된다.
         weight: number,
         style: 'normal' | 'italic'
       }[]
       debug?: boolean = false // true 일 경우 각 element의 border, line-height 등이 표시됨. 
   
       status?: number = 200
       statusText?: string
       headers?: Record<string, string>
     },
   )

   new ImageResponse(
     element: ReactElement,
     options: {
       width?: number = 1200
       height?: number = 630
       emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' = 'twemoji', // emoji render에 어떤 lib을 사용할 것인지
       fonts?: {
         name: string,
         data: ArrayBuffer, // 폰트 파일 데이터. fetch(URL).then(res => res.imageBuffer())로 가져오면 된다.
         weight: number,
         style: 'normal' | 'italic'
       }[]
       debug?: boolean = false // true 일 경우 각 element의 border, line-height 등이 표시됨. 
   
       status?: number = 200
       statusText?: string
       headers?: Record<string, string>
     },
   )

7. 대략의 사용례는 아래와 같음.

   // app/og/route.tsx
   import { ImageResponse } from 'next/server'; // app router 사용시 @verce/og가 포함되어 있음
   
   export const runtime = 'edge';
   
   const font = fetch(new URL('../path/to/font/Font.woff', import.meta.url)).then(
     (res) => res.arrayBuffer(),
   );
   
   export async function GET(request: Request) {
     const fontData = await font;
   
     // query param으로 이런 저런 텍스트를 동적으로 넣을 수 있음.
     const url = new URL(request.url)
     const searchParams = url.searchParams
     const title = searchParams.has("title") ? searchParams.get("title") : null
   
     return new ImageResponse(
       (
         <div
           style={{
           backgroundColor: 'white',
           height: '100%',
           width: '100%',
           fontSize: 100,
           fontFamily: '"Font"',
           paddingTop: '100px',
           paddingLeft: '50px',
         }}
        >
          {title ? title : 'Hello World!'}
        </div>
      ),
      {
        width: 1200,
        height: 630,
        fonts: [
          {
            name: 'Font',
            data: fontData,
            style: 'normal',
          },
        ],
      },
    );
   }

   // app/og/route.tsx
   import { ImageResponse } from 'next/server'; // app router 사용시 @verce/og가 포함되어 있음
   
   export const runtime = 'edge';
   
   const font = fetch(new URL('../path/to/font/Font.woff', import.meta.url)).then(
     (res) => res.arrayBuffer(),
   );
   
   export async function GET(request: Request) {
     const fontData = await font;
   
     // query param으로 이런 저런 텍스트를 동적으로 넣을 수 있음.
     const url = new URL(request.url)
     const searchParams = url.searchParams
     const title = searchParams.has("title") ? searchParams.get("title") : null
   
     return new ImageResponse(
       (
         <div
           style={{
           backgroundColor: 'white',
           height: '100%',
           width: '100%',
           fontSize: 100,
           fontFamily: '"Font"',
           paddingTop: '100px',
           paddingLeft: '50px',
         }}
        >
          {title ? title : 'Hello World!'}
        </div>
      ),
      {
        width: 1200,
        height: 630,
        fonts: [
          {
            name: 'Font',
            data: fontData,
            style: 'normal',
          },
        ],
      },
    );
   }

8. tailwind 사용이 가능한데 아직 experimental이 붙어있고 className 말고 tw를 사용하도록 되어있음.
9. Hobby plan일 경우 단일 function당 1MB 제한이 있어 한글 커스텀 폰트를 추가하긴 쉽지 않았음.
10. sehyunchung.dev에 적용해본 결과 -> https://sehyunchung.dev/og?title=암온더넧렙을&description=절대적룰을지켜

Q: How important is routine when it comes to learning? For example, is it important to have a dedicated study area?

A: Not at all. Most people do better over time by varying their study or practice locations. The more environments in which you rehearse, the sharper and more lasting the memory of that material becomes—and less strongly linked to one “comfort zone.” That is, knowledge becomes increasingly independent of surroundings the more changes you make—taking your laptop onto the porch, out to a café, on the plane. The goal, after all, is to be able to perform well in any conditions. Changing locations is not the only way to take advantage of the so-called context effect on learning, however. Altering the time of day you study also helps, as does changing how you engage the material, by reading or discussing, typing into a computer or writing by hand, reciting in front of a mirror or studying while listening to music: Each counts as a different learning “environment” in which you store the material in a different way.

Benedict Carey, How We Learn. Random House Trade Paperbacks; Reprint edition (June 9, 2015) p. 201